import React from 'react'
import { history } from 'umi';
import { Card, Col, Row, Divider, Tag } from 'antd';
import { CaretDownOutlined, UserOutlined, ShoppingCartOutlined, AccountBookOutlined, TagsOutlined } from '@ant-design/icons';
import HomeEchart from '@/components/homeEchart';
import Style from '@/styles/index.less'

type Props = {}

const Index = (props: Props) => {
    return (
        <div>
            <Row gutter={16} style={{ marginBottom: '20px' }}>
                <Col span={6}>
                    <Card title="销售额" extra={<Tag color="green">今日</Tag>}>
                        <p className={Style.large}>0</p>
                        <span className={Style.small}>昨日 999.01 </span>
                        <span className={Style.small}>日环比 -100% </span>
                        <CaretDownOutlined className={Style.icon} />
                        <Divider />
                        <div className={Style.fenkai}>
                            <span className={Style.small}>本月销售额 </span>
                            <span className={Style.small}>42594.37元 </span>
                        </div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="用户访问量" extra={<Tag color="green">今日</Tag>}>
                        <p className={Style.large}>342</p>
                        <span className={Style.small}>昨日 999.01 </span>
                        <span className={Style.small}>日环比 -100% </span>
                        <CaretDownOutlined className={Style.icon} />
                        <Divider />
                        <div className={Style.fenkai}>
                            <span className={Style.small}>本月访问量 </span>
                            <span className={Style.small}>4881Pv </span>
                        </div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="订单量" extra={<Tag color="green">今日</Tag>}>
                        <p className={Style.large}>0</p>
                        <span className={Style.small}>昨日 2 </span>
                        <span className={Style.small}>日环比 -100% </span>
                        <CaretDownOutlined className={Style.icon} />
                        <Divider />
                        <div className={Style.fenkai}>
                            <span className={Style.small}>本月订单量 </span>
                            <span className={Style.small}>25单 </span>
                        </div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="新增用户" extra={<Tag color="green">今日</Tag>}>
                        <p className={Style.large}>30</p>
                        <span className={Style.small}>昨日 999.01 </span>
                        <span className={Style.small}>日环比 -100% </span>
                        <CaretDownOutlined className={Style.icon} />
                        <Divider />
                        <div className={Style.fenkai}>
                            <span className={Style.small}>本月新增用户 </span>
                            <span className={Style.small}>484人 </span>
                        </div>
                    </Card>
                </Col>
            </Row>
            {/* 跳转 */}
            <Row gutter={16} style={{ marginBottom: '20px' }}>
                <Col span={2}>
                    <Card hoverable={true} style={{ textAlign: 'center' }} onClick={() => history.push('/home/user/userManage')}>
                        <UserOutlined style={{ color: 'blue', fontSize: '30px' }} />
                        <p>用户管理</p>
                    </Card>
                </Col>
                <Col span={2}>
                    <Card hoverable={true} style={{ textAlign: 'center' }} onClick={() => history.push('/home/commodity')}>
                        <ShoppingCartOutlined style={{ color: 'orange', fontSize: '30px' }} />
                        <p>商品</p>
                    </Card>
                </Col>
                <Col span={2}>
                    <Card hoverable={true} style={{ textAlign: 'center' }} onClick={() => history.push('/home/order/orderManage')}>
                        <AccountBookOutlined style={{ color: 'purple', fontSize: '30px' }} />
                        <p>订单管理</p>
                    </Card>
                </Col>
                <Col span={2}>
                    <Card hoverable={true} style={{ textAlign: 'center' }} onClick={() => history.push('/home/marketing/coupon/list')}>
                        <TagsOutlined style={{ color: 'pink', fontSize: '30px' }} />
                        <p>优惠券</p>
                    </Card>
                </Col>
            </Row>
            {/* 图表 */}
            <HomeEchart/>
        </div>
    )
}

export default Index